﻿@using Model;
@{
    Layout = null;
    List<TimeLine> list = ViewBag.list;
}

<!DOCTYPE html>
<html>
<head>

    <title>用技术记录生活--麒麟</title>
    <meta name="description" content="用技术记录生活--麒麟">
    <link href="http://libs.baidu.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://libs.baidu.com/fontawesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
    @*<link href="/Content/css/bootstrap.min.css" media="all" rel="stylesheet">
    <link href="/Content/css/font-awesome.css" media="all" rel="stylesheet">*@
    <link href="/Content/css/timelinestyles.css" media="all" rel="stylesheet">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">

</head>

<body>

    <div id="timeline" class="timeline animated">
        @foreach (var item in list)
        {
            <div class="timeline-row">
                <div class="timeline-time">
                    <small>@item.tl_time.ToString("yyyy年MM月dd日")</small>@item.tl_time.ToString("HH:mm:ss")
                </div>
                <div class="timeline-icon">
                    <div class="bg-primary">
                        <i class="fa fa-pencil"></i>
                    </div>
                </div>
                <div class="panel timeline-content">
                    <div class="panel-body">
                            <p>@item.tl_content</p>
                    </div>
                </div>
            </div>
        }
        
       
        
    </div>
    <div class="timeadd" data-toggle="modal"  data-target="#myModal">
        <i class="fa fa-pencil"></i>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="form-group">
                            <textarea id="content" class="form-control" rows="5" placeholder="点滴回忆" maxlength="500"></textarea>
                        </div>
                        <input type="text" id="key" class="form-control" placeholder="天王盖地虎">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default"
                                data-dismiss="modal">
                            关闭
                        </button>
                        <button type="button" id="postdata" class="btn btn-primary">
                            提交
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
        <input type="hidden" id="totalPages" value="@ViewBag.totalPages" />
        @*<script src="/Content/js/jquery2.1.1.min.js"></script>
        <script src="/Content/js/bootstrap.min.js"></script>*@
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
        <script src="http://libs.baidu.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <script>
            var clickindex = 0;
            var page = 1;
            var loaddata = false;
            $(document).ready(function () {
                $("#postdata").click(function () {
                    if (clickindex==1)
                    {
                        return;
                    }
                    clickindex = 1;
                    $.post('/TimeLine/Add', { "c": $("#content").val(), "key": $("#key").val() }, function (data) {
                        if(data.code==200)
                        {
                            location.reload();
                        }
                        else {
                            alert(data.msg);
                        }
                        clickindex = 0;
                    });
                });
                var timelineAnimate;
                timelineAnimate = function (elem) {
                    return $(".timeline.animated .timeline-row").each(function (i) {
                        var bottom_of_object, bottom_of_window;
                        bottom_of_object = $(this).position().top + $(this).outerHeight();
                        bottom_of_window = $(window).scrollTop() + $(window).height();
                        if (bottom_of_window > bottom_of_object) {
                            return $(this).addClass("active");
                        }
                    });
                };
                timelineAnimate();
                return $(window).scroll(function () {
                    if (uiIsPageBottom() && !loaddata && page < $("#totalPages").val()) {
                        uiGetData();
                    }
                    return timelineAnimate();
                });
            });

            function uiGetData() {
                page += 1;
                loaddata = true;
                var body = $("#timeline");
                $.get('/TimeLine/List?page=' + page, function (data) {
                    var html = "";
                    $(data.rows).each(function (i, m) {
                        html += '<div class="timeline-row">' +
                '<div class="timeline-time">' +
                    '<small>2016年4月16日</small>15:40:00' +
                '</div>' +
                '<div class="timeline-icon">' +
                    '<div class="bg-primary">' +
                        '<i class="fa fa-pencil"></i>' +
                    '</div>' +
                '</div>' +
                '<div class="panel timeline-content">' +
                    '<div class="panel-body">' +
                          '<p>' + m.tl_content + '</p>' +
                    '</div>' +
                '</div>' +
            '</div>';
                    });
                    body.append(html);
                    loaddata = false;
                });
            }

            function uiIsPageBottom() {
                var scrollTop = 0;
                var clientHeight = 0;
                var scrollHeight = 0;
                if (document.documentElement && document.documentElement.scrollTop) {
                    scrollTop = document.documentElement.scrollTop;
                } else if (document.body) {
                    scrollTop = document.body.scrollTop;
                }
                if (document.body.clientHeight && document.documentElement.clientHeight) {
                    clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
                } else {
                    clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
                }
                // 知识点：Math.max 比较大小，取最大值返回
                scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
                if (scrollTop + clientHeight == scrollHeight) {
                    return true;
                } else {
                    return false;
                }
            }


        </script>

</body>

</html>